<template>
	<div class="container">
		<div class="user-title">
			个人中心
		</div>
		
		<div class="user-head f-row">
			<div class="f-row flex-2">
				<img src="../assets/img/banner2.jpg"/>
			</div>
			<div class="flex-6">
				<p>昵称 ：孙凡</p>
				<div class="userp f-row">
					<p class="flex-1">我的收藏</p>
					<p class="flex-1">历史足迹</p>
					<p class="flex-1">我的喜欢</p>
				</div>
			</div>
			
		</div>
		
		<div class="user-list f-row" v-for="item in userList" :key="item.id">
			<div><van-icon size="26" :name="item.icon"></van-icon></div>
			<div class="flex-1">{{item.text}}</div>
			<div><van-icon size="20" name="arrow"></van-icon></div>
		</div>
		
	</div>
</template>

<script>
	export default {
		data(){
			return {
				userList : [
					{id : 1, text : '我的订单', icon : 'records'},
					{id : 2, text : '地址管理', icon : 'location-o'},
					{id : 3, text : '心愿单', icon : 'like-o'},
					{id : 4, text : '我的红包', icon : 'bill-o'},
					{id : 5, text : '联系客服', icon : 'service-o'},
					{id : 6, text : '服务政策', icon : 'smile-o'},
					{id : 7, text : '退出登录', icon : 'exchange'},
				]
			}
		}
	}
</script>

<style scoped lang="less">
	.user-title{
		height: 50px;
		font-size: 16px;
		text-align: center;
		line-height: 50px;
		backgrod-color: #fff;
		color:#07c160;
	}
	.user-head{
		height: 170px;
		margin: 10px 0px;
		
		div{
			padding: 0px 10px;
			line-height: 30px;
		}
		div:nth-child(2){
			padding-top:40px;
		}
		.flex-2{
			align-items: center;
		}
		.flex-6>p:first-child{
			text-align: center;
			color: #07c160;
			font-size: 24px;
		}
		img{
			height: 100px;
			border-radius: 50%;
			}
		.userp{
			font-size: 16px;
		}
	 }
	 .user-list{
	 	padding:0px 20px;
	 	height: 50px;
	 	line-height: 50px;
	 	background-color: #fff;
	 	margin-top: 2px;
	 	color: #333;
	 	
	 	div:nth-child(1), div:nth-child(3){
	 		width:32px;
	 		display: flex;
	 		align-items: center;
	 	}
	 	.flex-1{
	 		padding-left: 10px;
	 	}
	 	div:nth-child(3){
	 		justify-content: flex-end;
	 	}
	 }
</style>
